import { Component } from 'react'
import {View, Icon, ScrollView } from '@tarojs/components'
import './index.scss'
import Taro from '@tarojs/taro'
import myEvent from '../../../utils/event'
import Utils from '../../../utils/index'


let lgIdHolder = 0;

export default class LgSelepicker extends Component {
  constructor(props) {
    super(props)
    console.log('props',props);
    
    this.openSele = this.openSele.bind(this);
    this.handSele = this.handSele.bind(this);
    this.closeSele = this.closeSele.bind(this);
    this.getlistSize = this.getlistSize.bind(this);
    this.id = `Lg-select-picker${lgIdHolder++}`
  }
  state = {
    choIndex: (this.props.default && this.props.dataList && this.props.dataList[this.props.default]) ? this.props.default : 0 ,
    isShow: false,
    noSele: this.props.noSele || '未选中',
    attr: this.props.attr || '',
    imgAttr: this.props.imgAttr || ''
  }
  setVal = index => {
    this.setState({choIndex: index});
  }
  getVal() {
    return this.state.choIndex;
  }
  // componentSho
  pageMsg = {width: 0, height: 0}
  domPosition = {top: 0, height:0, width: 0}
  componentDidMount () {
    var that = this;
    myEvent.on("colseSele", () => {
      that.closeSele();
    });
    if (this.props.type && this.props.type == "B") {
      this.hasGetBsize = setTimeout(this.getlistSize, 100);
    }
  }
  getlistSize() {
    this.hasGetBsize = false;
    var that = this;
    Taro.getSystemInfo({
      success: res => {
        that.pageMsg = {width: res.windowWidth, height: res.windowHeight};
        Taro.createSelectorQuery().select('#' + this.id).boundingClientRect(function(rect) {
          var pageMsg = that.pageMsg;
          // console.log(rect)
          var bottom = (rect && rect.bottom) ? rect.bottom : 0;
          var unit = "px";
          that.domPosition = {height: (pageMsg.height - bottom) + unit, width: pageMsg.width + unit}
        }).exec()
      }
    })
  }
  componentWillUnmount () {
    if (this.hasGetBsize) {
      clearTimeout(this.hasGetBsize);
    }
  }
  componentDidShow () {
  }

  componentDidHide () {}

  componentDidCatchError () {}

  closeBorther
  openSele(e) {
    e.stopPropagation();
    var that = this;
    this.setState({isShow: !this.state.isShow}, function() {
      if (that.state.isShow) {
        that.closeBorther = true;
        myEvent.emit("colseSele");
      }
    });
  }
  closeSele() {
    if (this.state.isShow) {
      if (this.closeBorther)
        this.closeBorther = false;
      else
        this.setState({isShow: false});
    }
  }
  handSele(data, i) {
    this.setState({choIndex: i, isShow: false});
    this.props.changeSele(data, i);
  }

  // shouldComponentUpdate(nProps, nState) {
  //   return (this.props.dataList !== nProps.dataList || this.state.isShow != nState.isShow || );
  // }

  getHeight() {
    if (this.state.isShow) {
      return this.domPosition
    } else {
      return {height: 0, width: this.domPosition.width}
    }
  }
  render () {
    var props = this.props, that = this;
    var className = props.className || '', type = props.type || 'A';
    var {choIndex, isShow, noSele, attr, imgAttr} = this.state;
    var dataList = this.props.dataList || [];
    var nameWidth = props.width ? 'width:' + Taro.pxTransform(props.width) : "";
    if (props.type == 'B') {
      if (isShow && dataList.length) {
        className += ' lg_sele_B_show';
      } else {
      }
      return (
        <View className={'lg_sele_B ' + className} style={props.style || {}} onBlur={this.closeSele}>
            <View className='lg_sele_B_name oneline' id={this.id} onClick={this.openSele} style={nameWidth} touchmove >
              {dataList[choIndex] ? dataList[choIndex][attr] : noSele}
            </View>
            <View className='lg_sele_B_warp' style={this.getHeight()} onClick={this.closeSele}>
              <View className='lg_sele_B_content'>
                <ScrollView scrollTop={Math.random()} scrollX={false} scrollY={true}
                            onClick={(e) => {
                              e.stopPropagation();
                            }}
                            className='lg_sele_B_list'
                            style={props.listHeight ? {height: Taro.pxTransform(props.listHeight)} : ""}>
                  {
                    dataList.map((o, i) => {
                      return <SeleItemB key={'sele_b_i' + i} choIndex={choIndex} attr={attr} data={o} index={i} handSele={that.handSele}  />
                    })
                  }
                </ScrollView>
              </View>
            </View>
        </View>
      )
    }
    if (isShow && dataList.length) {
      className += ' lg_sele_A_show';
      var listStyle = 'height:' + Taro.pxTransform(props.listHeight || dataList.length * 62 + 34);
    } else {
      var listStyle = 'height: 0; padding: 0;'
    }
    return (
        <View className={'lg_sele_A ' + className} style={props.style || {}} onBlur={this.closeSele} touchmove onClick={(e) => {e.stopPropagation();}}>
            <View className='lg_sele_A_name oneline' onClick={this.openSele} style={nameWidth} touchmove>
              {dataList[choIndex] ? dataList[choIndex][attr] : noSele}
            </View>
            <View className='lg_sele_A_warp' style={listStyle}>
              <View className='lg_sele_A_content'>
              <ScrollView scrollTop={Math.random()} scrollX={false} scrollY={true} className='lg_sele_A_list' touchmove onClick={(e) => {e.stopPropagation();}}>
                {
                  dataList.map((o, i) => {
                    return <SeleItemA key={'sele_i' + i} choIndex={choIndex} attr={attr} imgAttr={imgAttr} data={o} index={i} handSele={that.handSele}  />
                  })
                }
              </ScrollView>
              </View>
            </View>
        </View>
    )
  }
}

class SeleItemA extends Component {
  constructor(props) {
    super(props)
    this.choItem = this.choItem.bind(this);
  }
  choItem() {
    var {choIndex, data, index, handSele} = this.props;
    if (choIndex == index) return;
    handSele(data, index);
  }
  render() {
    var {choIndex, attr, imgAttr, data, index} = this.props;
    var className = '', imgContent = '';
    if (choIndex == index) className += ' lg_sele_item_A_cho';
    if (imgAttr) {
      var backImg = data[imgAttr] ? {backgroundImage: 'url("' + data[imgAttr] + '")'} : {}
      imgContent = <View className='lg_sele_item_A_img' style={backImg} />
      className += ' lg_sele_item_A_has_img';
    }
    return (
      <View className={'lg_sele_item_A' + className} onClick={this.choItem}>
        {imgContent}{attr ? data[attr] : data}
      </View>
    )
  }
}

class SeleItemB extends Component {
  constructor(props) {
    super(props)
    this.choItem = this.choItem.bind(this);
  }
  choItem() {
    var {choIndex, data, index, handSele} = this.props;
    if (choIndex == index) return;
    handSele(data, index);
  }
  render() {
    var {choIndex, attr, data, index} = this.props;
    if (choIndex == index) {
      var className =  ' lg_sele_item_B_cho',
          icon = <Icon className="lg_sele_item_B_icon" type='success_no_circle' color='#0066ff' />;
    } else {
      var className =  '',
        icon = "";
    }
    return (
      <View className={'lg_sele_item_B' + className} onClick={this.choItem}>
        {attr ? data[attr] : data}{icon}

      </View>
    )
  }
}
